<template>
    <div>
        <el-table v-loading="listLoading" :data="list" stripe highlight-current-row>
            <el-table-column label="变动金额" prop="money" width="100"> </el-table-column>
            <el-table-column label="余额" prop="current_money" width="100"> </el-table-column>
            <el-table-column label="变动积分" prop="score" width="100"> </el-table-column>
            <el-table-column label="变动时间" prop="created_at" width="150"> </el-table-column>
            <el-table-column label="变动备注" prop="remark"> </el-table-column>
        </el-table>
        <pagination
                v-show="total>0"
                :background="true"
                :total="total"
                :page.sync="page"
                :limit.sync="limit"
                @pagination="initData"
        ></pagination>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import Pagination from "@/components/Pagination";
    export default {
        name: "Account",
        components: {
            Pagination,
        },
        computed: {
            ...mapState({
                current: state => state.card.current,
            }),
        },
        data(){
            return{
                page: 1,
                limit: 10,
                list:[],
                total:0,
                listLoading:false
            }
        },
        methods:{
            initData(){
                this.$http.get('/api/accounts?card_sn='+this.current.card_sn+'&page='+this.page+'&limit='+this.limit).then(ret=>{
                    this.list = ret.data.data;
                    this.total = ret.data.total ? ret.data.total : 0;
                    this.listLoading = false;
                })
            }
        }
    }
</script>

<style scoped>
.box-card{
    margin-bottom: 10px;
}
</style>